<template>
  <div class="rich-editor">
    <Toolbar
      @execute="handleExecute"
      :is-preview="isPreview"
      @toggle-preview="togglePreview"
      @download="downloadContent"
    />
    <div class="editor-content">
      <ContentEditable
        ref="contentEditableRef"
        v-if="!isPreview"
        :content="currentContent"
        v-model:spellcheck="spellcheck"
        @update:content="handleContentChange"
      />
      <div v-else class="preview p-4" v-html="currentContent" />
    </div>
    <Footer :content="currentContent" v-model:spellcheck="spellcheck" />
    <HoverBar ref="hoverBarRef" />
  </div>
</template>

<script setup lang="ts">
import { useArticleStore } from "@/stores/article";
import { storeToRefs } from "pinia";
import Toolbar from "./editor/Toolbar.vue";
import ContentEditable from "./editor/ContentEditable.vue";
import Footer from "./editor/Footer.vue";
import HoverBar from "./editor/HoverBar.vue";
import { useEditorStore } from "@/stores/editor";
import { debounce } from "lodash";

const contentEditableRef = ref();
const hoverBarRef = ref();
const isPreview = ref(false);
const spellcheck = ref(true);
const editorStore = useEditorStore();

const articleStore = useArticleStore();
const { activeArticle, articles } = storeToRefs(articleStore);

// 计算当前文章内容
const currentContent = computed(() => {
  const article = articles.value.find((a) => a.id === activeArticle.value);
  return article?.content || "";
});

// 添加防抖处理
const debouncedLoadHistory = debounce(() => {
  editorStore.loadArticleHistory();
}, 300);

// 监听当前文章变化
watch(activeArticle, () => {
  const article = articles.value.find((a) => a.id === activeArticle.value);
  if (article) {
    contentEditableRef.value?.setContent(article.content);
    debouncedLoadHistory(); // 使用防抖调用
    // 自动聚焦编辑区
    nextTick(() => {
      contentEditableRef.value?.focus();
    });
  } else {
    contentEditableRef.value?.setContent("");
  }
});

// 监听拼写检查状态变化
watch(spellcheck, (newValue) => {
  if (newValue) {
    // 如果开启拼写检查，自动聚焦编辑区
    nextTick(() => {
      contentEditableRef.value?.focus();
    });
  }
});

watch(contentEditableRef, (newEditor) => {
  if (newEditor) {
    // 同步编辑器内容与存储状态
    newEditor.setContent(articleStore.activeArticleContent);
  }
});

const handleExecute = (command: string, value?: string) => {
  contentEditableRef.value?.execute(command, value);
};

const togglePreview = () => {
  isPreview.value = !isPreview.value;
};

const handleContentChange = (newContent: string) => {
  // 只有在非更新状态下且内容确实变化时才更新
  if (
    newContent !== articleStore.activeArticleContent &&
    !editorStore.isUpdating
  ) {
    articleStore.updateArticleContent(newContent);
  }
};

// 下载内容为 Word 文档
const downloadContent = () => {
  const content = currentContent.value; // 获取当前内容
};

// 在组件挂载后设置 HoverBar 引用
onMounted(() => {
  if (contentEditableRef.value) {
    contentEditableRef.value.setHoverBarRef(hoverBarRef.value);
  }
});
</script>

<style lang="scss" scoped>
.rich-editor {
  @apply h-full flex flex-col bg-[var(--el-bg-color)] border-b border-[var(--el-border-color-light)];
}

.editor-content {
  @apply flex-1 overflow-auto border-t border-[var(--el-border-color-light)];
}
</style>
